<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import QRCode from "./QRCode.svelte";
    import { Link } from "../Typography";
    import Space from "../Space/Space.svelte";
    import { writable } from "svelte/store";
    import { Input } from "../Input";
    import img from "/src/assets/logo.svg";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Views/QRCode",
        component: QRCode,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
    let src = $state("https://www.baidu.com");
    let qrcode = $state<any>();
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v" inline>
            <div>
                <QRCode value={src} />
            </div>
            <Input bind:value={src} />
        </Space>
    {/snippet}
</Story>

<Story name="Icon">
    {#snippet template(args)}
        <Space dir="v" inline>
            <div>
                <QRCode value={src} icon={img} />
            </div>
        </Space>
    {/snippet}
</Story>

<Story name="Colors">
    {#snippet template(args)}
        <Space dir="h">
            <QRCode value="https://www.baidu.com" color="rgb(37,119,47)" />
            <QRCode value="https://www.baidu.com" color="#1890ff" bgColor="#ededed" />
        </Space>
    {/snippet}
</Story>

<Story name="Levels">
    {#snippet template(args)}
        <Space dir="h" wrap>
            <QRCode value="https://gitee.com/cqb325/cui-solid/blob/master/src/assets/images/logo.svg" level="L" />
            <QRCode value="https://gitee.com/cqb325/cui-solid/blob/master/src/assets/images/logo.svg" level="M" />
            <QRCode value="https://gitee.com/cqb325/cui-solid/blob/master/src/assets/images/logo.svg" level="Q" />
            <QRCode value="https://gitee.com/cqb325/cui-solid/blob/master/src/assets/images/logo.svg" level="H" />
        </Space>
    {/snippet}
</Story>

<Story name="Download">
    {#snippet template(args)}
        <Space dir="h">
            <QRCode bind:this={qrcode} value="https://www.baidu.com" />
            <Button
                type="primary"
                onclick={() => {
                    qrcode.download();
                }}>下载</Button
            >
        </Space>
    {/snippet}
</Story>
